<script lang="ts" setup>
const globalStore = useGlobalStore()
function toggleBigCharMode(val) {
  globalStore.setBigCharMode(val)
}
const isBigCharMode = computed(() => {
  return globalStore.isBigCharMode
})
</script>

<template>
  <div class="button flex cursor-pointer items-center justify-center px-20px py-10px" @click="toggleBigCharMode(!isBigCharMode)">
    <img src="/img/heart.png" alt="">
    <span class="ml-10px w-100px text-white">
      {{ isBigCharMode ? '普通模式' : '关怀模式' }}
    </span>
  </div>
</template>

<style scoped lang="scss">
.button {
  background: linear-gradient(-44deg, rgba(251, 165, 28, 1) -1.24%, rgba(251, 165, 165, 1) 98.64%);
  z-index: 9;
  position: fixed;
  top: 100px;
  right: 0;
  border-radius: 4px 0 0 4px;
  font-size: 20px;
}
</style>
